<template>
    <view v-if="isShow" class="popup-overlay">
        <view :class="{ 'shrink-animation': isClicked, 'scale-animation': isShow }">
            <image style="width: 340rpx;margin-top: 52rpx" mode="widthFix" :src="showImageUrl"></image>
            <view class="err-title">{{showTtitle}}</view>
            <view class="err-text">{{showText}}</view>
            <view class="err-btn" @click.stop="ClickGo">{{isGoUrl ? '去查看' : '我知道了'}}</view>
        </view>
        <view v-if="isShow & !isClicked" class="delet-icon-error"  @click="handleClick()">
          <u-icon name="close-circle" color="#FFFFFF" size="50"></u-icon>
            <!--<image src="http://yyadmin.laimeitong.com/images/delet.png"></image>-->
        </view>
    </view>
</template>
<script>
const app = getApp();
import newUserRewardApi from '@/api/newUserReward.js'
export default {
    data() {
        return {
            isClicked: false,
            isShow: false,
            BestImgUrl: app.globalData.imgurl,
            compInfo: {},
        }
    },
    props: {
        showTtitle: {
            type: String,
            default: '领取失败'
        },
        showText: {
            type: String,
            default: '领取失败'
        },
        showImageUrl: {
            type: String,
            default: `${app.globalData.imgurl}/image_684.png` 
        }
    },
    computed: {
        isGoUrl(){
            return this.showTtitle === '领取成功'
        }
    },
    methods: {
        showUp() {
            this.isShow = true;
        },
        // 点击事件
        ClickGo() {
            this.handleClick(() => {
                this.$emit('ClickGo', this.isGoUrl)
            })
        },
        handleClick(fn) {
            this.isClicked = true;

            // 可选：动画结束后移除元素
            setTimeout(() => {
                // this.$destroy() // 根据实际需求决定是否要销毁组件
                this.isShow = false;
                this.isClicked = false
                if (fn) {
                    fn()
                }
            }, 1000)
        }
    }
}
</script>
<style>
/* @import "./css/index-xg.css"; */
@import "./css/animation-err.css";
</style>